<template>
  <el-affix>
  <nav class="globalnav">
    <div class="menu">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color=rgba(0,0,0,0)
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        @select="handleSelect"
      >
        <el-menu-item index="/">生活</el-menu-item>
        <el-menu-item index="/learn">笔记</el-menu-item>
        <el-menu-item index="/story">故事</el-menu-item>
        <el-menu-item index="/About">个人</el-menu-item>
        <el-menu-item index="/Admin" v-if="undefined != username">控制台</el-menu-item>
      </el-menu>
    </div>
  </nav>
</el-affix>
</template>
  
<script lang="ts">
  import { computed, defineComponent } from 'vue'
  import { useStore } from 'vuex'
  import { key } from '@/store/store';

  const store = useStore(key)
  const username = computed(()=>{
    // return store.state.username;
    return sessionStorage.getItem("username");
  })

  
  const handleSelect = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
  }

  export default defineComponent({
    name: 'head-view',
    
    setup() {
        return {
            handleSelect,
            username
        }
    }
  })
</script>

<style>
.menu {
  margin: 0 auto;
  max-width: 980px;
  padding: 0,22px;
  position: relative;
  padding-left: max(22px,env(safe-area-inset-left));
  padding-right: max(22px,env(safe-area-inset-right));
}
.globalnav {
  background: rgba(0,0,0,0.8);
}

</style>